<template>
	<view class="container">
		<u-popup v-model="show" mode="top" :mask="false">
			<view class="popup">
				<view class="header-image"><u-avatar size="160" :src="matchUser.pictureUrl"></u-avatar></view>
				<view class="header-text">
					<text>{{ matchUser.userName }}</text>
					<text>距离{{ matchUser.distance }}</text>
					<text>共同标签计划：旅行</text>
				</view>
				<view style="width: 600rpx;height: 90rpx;margin: 0 auto;">
					<y-button  @click="matchUserClick" content="建立关系" styleValue="background-color: #fff;width: 493rpx;height:72rpx;font-size:43rpx;margin: 0 auto;color:#6D39E9;"></y-button>
					<!-- <u-button @click="matchUserClick" type="default" bg-color="#fff" style="background-color: #fff;color: #6D39E9;width: 450rpx;height: 85rpx;">建立关系</u-button> -->
				</view>
				<view style="height: 30rpx;width: 100%;"></view>
			</view>
		</u-popup>
		<u-popup v-model="matchUserShow" mode="bottom" :mask="true" height="750" border-radius="50">
			<view class="matchUser">
				<view style="display: flex;justify-content: center;margin: 40rpx 0;"><text style="text-align: center;">邀请好友</text></view>
				<view><image  style="width: 500rpx;height: 500rpx;display: block;margin: 0 auto;" src="http://mp4.q05.cc/psketch%20%286%29.png" mode=""></image></view>
				<view style="width:100%;display: flex;justify-content: center;">
					<button
						v-if="!isInvitation"
						class="changeBtn"
						open-type="share"
						type="default"
						style="margin: 0;background-color: #6D39E9;border: none;color: #fff;font-size: 30rpx;font-weight: 500;width: 377rpx;height: 70rpx;"
					>
						分享好友
					</button>
					
				</view>
			</view>
		</u-popup>
		<view style="padding: 16rpx 0;"><u-tabs :list="list" :is-scroll="true" :current="tabsCurrent" @change="tabsChange" active-color="#444" bg-color="#F8F7FF"></u-tabs></view>
		<swiper class="swiper" style="height: 80vh;width: 100%;" :disable-touch="true" :current="tabsCurrent">
			<swiper-item style="height: 80vh;width: 100%;" catchtouchmove="stopTouchMove">
				<view style="margin-top: 100rpx;">
					<ySwiper @clickBtn="clickBtn" effect3d-previous-margin="90" :list="cardList" :effect3d="true" height="800" bg-color="#F8F7FF" :autoplay="false"></ySwiper>
				</view>
			</swiper-item>
			<swiper-item style="height: 80vh;width: 100%;" catchtouchmove="stopTouchMove">
				<view class="">
					<image style="width: 100%;height: 700rpx;margin: 0 auto;display: block;" src="https://i.loli.net/2021/05/01/rTB2396GgF58AYD.png" mode=""></image>
					<view style="width: 600rpx;height: 90rpx;margin: 150rpx auto 0 auto;">
						<!-- <y-button @click="startMatch" content="开始匹配" styleValue="width: 522rpx;height:87rpx;font-size:28rpx;background: radial-gradient(168.4% 168.4% at 50% 50%, #6D39E9 0%, #DACAFC 100%);margin: 0 auto;"></y-button> -->
						<button @click="startMatch" type="default" class="matchButton" :style="show?'background: #f1f3f8;color:#7A8193':''">开始匹配</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<u-modal border-radius="50" v-model="isInvitation" title="确认建立关联" :show-confirm-button="false" :show-cancel-button="false">
			<view class="slot-content">
				<image style="width: 500rpx;height: 400rpx;display: block; margin: 40rpx auto;" src="http://mp4.q05.cc/Hands%20Phone.png" mode=""></image>
				<view style="width:100%;display: flex;justify-content: center;margin-bottom: 50rpx;">
					<button v-if="isInvitation" @click="bindBtn" class="changeBtn" type="default" style="margin: 0;background-color: #6D39E9;border: none;color: #fff;font-size: 30rpx;font-weight: 500;width: 340rpx;height: 70rpx;">
						接受邀请
					</button>
				</view>
			</view>
		</u-modal>
		<u-tabbar :list="vuex_tabbar" :mid-button="true" @change="clickTabbar" :current="0"></u-tabbar>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import ySwiper from '../../components/u-swiper/u-swiper.vue';
import { matchingGetUser,confirmRealation } from '@/model/user.js';
export default {
	data() {
		return {
			show: false,
			list: [
				{
					name: '邀请朋友'
				},
				{
					name: '匹配附近的人'
				}
			],
			tabsCurrent: 0,
			matchUserShow: false,
			cardList: [
				{
					image: 'https://i.loli.net/2021/04/30/XDJPRa2FvACk8uZ.png',
					text: ['与Ta建立情侣关系', '创建属于你们俩的私密空间', '创建并记录共同计划'],
					btnText: '情侣关系'
				},
				{
					image: 'https://i.loli.net/2021/04/30/v8Jah2tipxmbwQO.png',
					text: ['与亲人建立关系', '让爱你的人更懂你'],
					btnText: '亲人关系'
				},
				{
					image: 'https://i.loli.net/2021/04/30/pExz1lrRBiWPFCA.png',
					text: ['与好友建立关系', '分享你的计划与日常', '让Ta们参与其中'],
					btnText: '朋友关系'
				}
			],
			cardIndex: 0,
			matchUser: {},
			clickRelation:"",
			relationData:{},
			isInvitation:false
		};
	},
	components: {
		ySwiper
	},
	computed: {
		...mapState(['vuex_tabbar'])
	},
	onLoad(e) {
		const {isInvitation,relation,userId} = e;
		this.isInvitation=isInvitation;
		this.relationData={
			relation,
			userId
		}
	},
	mounted() {
		console.log(this.vuex_tabbar);
	},
	methods: {
		async bindBtn(e){
			const res = await confirmRealation(this.relationData)
			uni.showToast({
				title:"绑定成功"
			})
			setTimeout(()=>{
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},1000)
			
		},
		matchUserClick() {
			uni.showToast({
				title: '绑定成功'
			});
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}, 1000);
		},
		startMatch() {
			const that = this;
			uni.showLoading({
				title: '匹配中'
			});
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					matchingGetUser({ longitude: res.longitude, latitude: res.latitude })
						.then(res => {
							uni.hideLoading();
							that.show = true;
							console.log(res);
							that.matchUser = res;
						})
						.catch(res => {
							uni.hideLoading();
							uni.showToast({
								title: '匹配失败稍后再试',
								icon: 'none'
							});
						});
				}
			});
		},
		stopTouchMove() {
			return false;
		},
		clickBtn(e) {
			const relation = e.btnText.replace('关系', '');
			this.matchUserShow=true;
			this.clickRelation=relation;
			// uni.navigateTo({
			// 	url: '/pages/relation/invitation?relation=' + relation
			// });
		},
		tabsChange(e) {
			this.tabsCurrent = e;
		},
		clickTabbar() {
			console.log(123);
		}
	},
	onShareAppMessage: function () {
		const userInfo = uni.getStorageSync('userInfo');
		const path = `/pages/relation/relation?isInvitation=true&relation=${this.clickRelation}&userId=${userInfo.userId}`;
		console.log(path)
	   return {
	     title: '快来和我组队打卡吧',
		 imageUrl:"http://mp4.q05.cc/share.png",
	     path: path
	   }
	 },
};
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-color: #f8f7ff;
	overflow: hidden;

	:global {
		.uni-swiper-slides {
			inset: 0px 46px !important;
		}
	}
}
.matchButton{
	width: 522rpx;
	height:87rpx;
	font-size:35rpx;
	line-height: 87rpx;
	background: radial-gradient(168.4% 168.4% at 50% 50%, #6D39E9 0%, #DACAFC 100%);
	margin: 0 auto;	
	border-radius: 51rpx!important;
	color: #fff;
	border: none;
}
.changeBtn {
	background-color: #6d39e9;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 70rpx;
	box-shadow: 0px 2px 8px rgba(109, 57, 233, 0.54);
}
.popup {
	width: 100%;
	background: radial-gradient(168.4% 168.4% at 50% 50%, #6d39e9 0%, #dacafc 100%);
	border-radius: 0px 0px 20px 20px;
	color: #fff;
	.header-image {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 50rpx;
	}
	.header-text {
		text-align: center;
		margin: 40rpx 0;
		text {
			display: block;
		}
	}
}
</style>
